import QtQuick 2.15
import QtQuick.Layouts 2.15
import Qt5Compat.GraphicalEffects

Rectangle {
    id:middleCard
    Layout.fillHeight:true
    Layout.fillWidth:true
    radius: 20
    clip:true
    color:cardColor

    layer.enabled: true
    layer.effect: OpacityMask{
        maskSource: Rectangle{
            width: middleCard.width
            height: middleCard.height
            radius: middleCard.radius
        }
    }

    property string title
    property url img
    property int textSize:20
    property int middleCardIconSize: 70
    property string text1
    property string text2
    property string text3

    RowLayout {
        anchors.fill: parent
        Rectangle{//文本区域
            Layout.row: 0
            Layout.fillHeight: true
            Layout.fillWidth: true
            color:"transparent"
            Rectangle{
                anchors.fill: parent
                anchors.margins: 10
                anchors.centerIn: parent
                color:"transparent"
                Text {
                    id:t0
                    x:10
                    text: title
                    font.pixelSize: textSize
                    color: textColor
                }
                Rectangle{
//                    anchors.fill: parent
                    anchors.top: t0.bottom
                    color:"transparent"
                    x:30
                    ColumnLayout{
                        spacing: 10
                        Text {
                            id:t1
                            x:20
                            text:qsTr(text1)
                            color:textColor
                            font.pixelSize: textSize+5
                            font.wordSpacing: 10
                            font.bold: true
                        }
                        Text {
                            x:20
                            text:qsTr(text2)
                            color:textColor
                            font.pixelSize: textSize-10
                        }
                        Text {
                            text: qsTr(text3)
                            color:textColor
                            font.pixelSize: textSize-10
                        }
                    }
                }
            }
        }
        Rectangle{//图片区域
            Layout.row: 1
            Layout.fillHeight: true
            Layout.fillWidth: true
            color:"transparent"
            Image {
                source: img
                anchors.centerIn: parent
                sourceSize.width: middleCardIconSize
                sourceSize.height: middleCardIconSize
            }
        }
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            hintPopup.open()
        }
    }
}
